<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI智能对话 - Spring AI Alibaba Graph</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="ai-chat.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="config.js"></script>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-robot"></i> AI智能对话系统</h1>
            <p class="subtitle">基于Spring AI Alibaba Graph框架 - 端口48080 - 支持数据查询与图表生成</p>
        </header>
        
        <div class="main-content">
            <!-- 聊天区域 - 主要内容 -->
            <div class="chat-section">
                <div class="chat-container">
                    <div class="chat-header">
                        <i class="fas fa-comments"></i>
                        <h2>智能对话</h2>
                        <div class="status-indicator" id="statusIndicator">
                            <span class="status-dot"></span>
                            <span class="status-text">就绪</span>
                        </div>
                    </div>
                    <div class="chat-messages" id="chatMessages">
                        <div class="message ai-message">
                            <div class="message-content">
                                <i class="fas fa-robot message-icon"></i>
                                <div class="message-text">
                                    您好！我是AI智能助手，可以帮您进行数据查询、生成图表和回答各种问题。请告诉我您需要什么帮助？
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="chat-input">
                        <input type="text" id="userInput" placeholder="输入您的问题，例如：查询枫桥镇村干部任务完成情况...">
                        <button id="sendButton">
                            <i class="fas fa-paper-plane"></i>
                            <span>发送</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 辅助信息面板 - 可折叠 -->
            <div class="assistant-panel" id="assistantPanel">
                <div class="panel-header">
                    <h3><i class="fas fa-info-circle"></i> 辅助信息</h3>
                    <button class="toggle-panel" id="togglePanel">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
                <div class="panel-content">
                    <div class="panel-tabs">
                        <button class="tab-button active" data-tab="stream">流式数据</button>
                        <button class="tab-button" data-tab="nodes">处理流程</button>
                        <button class="tab-button" data-tab="data">查询结果</button>
                        <button class="tab-button" data-tab="chart">图表</button>
                        <button class="tab-button" data-tab="sql">SQL语句</button>
                    </div>
                
                <div class="tab-content active" id="streamTab">
                    <div class="stream-header">
                        <i class="fas fa-stream"></i>
                        <h3>实时流式数据</h3>
                    </div>
                    <div class="stream-content" id="streamContent">
                        <div class="stream-placeholder">
                            <i class="fas fa-wave-square"></i>
                            <p>等待数据流...</p>
                        </div>
                    </div>
                </div>
                
                <div class="tab-content" id="nodesTab">
                    <div class="nodes-header">
                        <i class="fas fa-project-diagram"></i>
                        <h3>AI处理流程</h3>
                        <div class="nodes-info" id="nodesInfo">
                            <span class="nodes-count">0 个节点</span>
                        </div>
                    </div>
                    <div class="nodes-content" id="nodesContent">
                        <div class="nodes-placeholder">
                            <i class="fas fa-sitemap"></i>
                            <p>暂无处理流程数据</p>
                        </div>
                    </div>
                </div>
                
                <div class="tab-content" id="dataTab">
                    <div class="data-header">
                        <i class="fas fa-table"></i>
                        <h3>查询结果</h3>
                        <div class="data-info" id="dataInfo">
                            <span class="data-count">0 条记录</span>
                        </div>
                    </div>
                    <div class="data-content" id="dataContent">
                        <div class="data-placeholder">
                            <i class="fas fa-database"></i>
                            <p>暂无查询结果</p>
                        </div>
                    </div>
                </div>
                
                <div class="tab-content" id="chartTab">
                    <div class="chart-header">
                        <i class="fas fa-chart-bar"></i>
                        <h3>数据图表</h3>
                    </div>
                    <div class="chart-content" id="chartContent">
                        <div class="chart-placeholder">
                            <i class="fas fa-chart-line"></i>
                            <p>暂无图表数据</p>
                        </div>
                    </div>
                </div>
                
                <div class="tab-content" id="sqlTab">
                    <div class="sql-header">
                        <i class="fas fa-code"></i>
                        <h3>SQL语句</h3>
                        <button class="copy-btn" id="copySqlBtn">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                    <div class="sql-content" id="sqlContent">
                        <div class="sql-placeholder">
                            <i class="fas fa-terminal"></i>
                            <p>暂无SQL语句</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="info-panel">
            <div class="info-item">
                <span class="info-label">数据库:</span>
                <span class="info-value" id="databaseName">-</span>
            </div>
            <div class="info-item">
                <span class="info-label">业务类型:</span>
                <span class="info-value" id="businessTypes">-</span>
            </div>
            <div class="info-item">
                <span class="info-label">数据查询:</span>
                <span class="info-value" id="isDataQuery">-</span>
            </div>
            <div class="info-item">
                <span class="info-label">表数量:</span>
                <span class="info-value" id="tableCount">-</span>
            </div>
        </div>
        
        <footer>
            <p>© 2025 AI智能对话系统 | 基于Spring AI Alibaba Graph框架 | API: localhost:48080</p>
        </footer>
    </div>

    <script src="ai-chat.js"></script>
</body>
</html>
